<template>
    <!-- 待审核 -->
    <div class="content-box">
      <div>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
          <el-form class="title cover">
            <h2>待审核</h2>
            <el-form-item>
              <el-button size="small" @click="batchAudit">&nbsp;审核&nbsp;</el-button>
            </el-form-item>
            <el-form-item>
						  <el-button size="small" @click="search" class="el-icon-search">&nbsp;查询</el-button>
					  </el-form-item>
          </el-form>
        </el-col>
        <!-- <el-col :span="24" class="SuppC-toolbar">
          <el-form class="title">
            <div>
              <h2>待审核</h2>
              <img @click="batchAudit" class="SuppC-common-icon" src="../../../static/content/images/Common/common-audit.png" alt=""/>
            </div>
            <el-form-item class="cover">
              <div class="list-img" @click="search">
                <img class="SuppC-common-icon" src="../../../static/content/images/Common/common-query.png" alt=""/>
                <span>查询</span>
              </div>
            </el-form-item>
          </el-form>
        </el-col> -->
        <!--列表-->
        <!-- <el-table v-if="notAuditList" :data="notAuditList"  @selection-change="selsChange" highlight-current-row class="indexList" v-loading="loading" element-loading-text="正在加载中">
          <el-table-column label=" " width="40">
            <template slot-scope="scope">
              <span style="margin-left:10px"
                :class="{
                  'no-Highlights':scope.row.Highlights===0,
                  'red-Highlights':scope.row.Highlights===1,
                  'orange-Highlights':scope.row.Highlights===2
                }">●</span>
            </template>
          </el-table-column>
          <el-table-column type="selection" width="55">
			    </el-table-column>
          <el-table-column prop="DocType" label="业务类型" width="120" sortable>
          </el-table-column>
          <el-table-column prop="DocNO" label="单据编号" width="120" sortable>
          </el-table-column>
          <el-table-column prop="DocDate" label="单据日期" width="120" sortable>
          </el-table-column>
          <el-table-column prop="Title" label="标题" show-overflow-tooltip sortable>
          </el-table-column>
          <el-table-column prop="Name" label="提交人" width="120" sortable>
          </el-table-column>
          <el-table-column prop="DocStatus" label="单据状态" width="120" sortable>
          </el-table-column>
          <el-table-column prop="TotalMoney" label="金额" sortable width="120">
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button-group>
                <el-button size="small" @click="audit(scope.$index, scope.row)">审核</el-button>
                <el-button size="small" @click="checkflow(scope.$index, scope.row)">查看流程</el-button>
                <el-button size="small" v-if="scope.row.AttachmentCount>0" class="icon iconfont icon-attachment"></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table> -->
        <el-table v-if="notAuditList" :data="notAuditList" @selection-change="selsChange" @row-dblclick="audit" @cell-mouse-enter="cellMouseEnterFn" @cell-mouse-leave="cellMouseLeaveFn" highlight-current-row class="indexList" v-loading="loading" element-loading-text="正在加载中">
          <el-table-column label=" " width="40">
            <template slot-scope="scope">
              <span style="margin-left:10px"
                :class="{
                  'no-Highlights':scope.row.Highlights===0,
                  'red-Highlights':scope.row.Highlights===1,
                  'orange-Highlights':scope.row.Highlights===2
                }">●</span>
            </template>
          </el-table-column>
          <el-table-column type="selection">
			    </el-table-column>
          <el-table-column prop="DocDate" label="日期" sortable>
          </el-table-column>
          <el-table-column prop="DocNO" label="单号" sortable>
          </el-table-column>
          <el-table-column prop="DocType" label="业务类型" sortable>
          </el-table-column>
          <el-table-column prop="TotalMoney" label="金额" sortable>
          </el-table-column>
          <el-table-column prop="Name" label="提交人" sortable>
          </el-table-column>
          <el-table-column prop="Title" label="业务描述" min-width="150" show-overflow-tooltip sortable>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- <el-button-group>
                <el-button size="small" @click="audit(scope.$index, scope.row)">审核</el-button>
                <el-button size="small" @click="checkflow(scope.$index, scope.row)">查看流程</el-button>
                <el-button size="small" v-if="scope.row.AttachmentCount>0" class="icon iconfont icon-attachment"></el-button>
              </el-button-group> -->
              <div v-if="scope.row.DocNO==mouse_enter_Rcv_DocNO">
              <!-- <div>  -->
                <div class="list-img" @click.stop="checkflow(scope.$index, scope.row)">
                  <!-- 查看流程 -->
                  <img class="common-icon" src="../../../static/content/images/Common/common-flow.png" alt=""/>
                </div>
                <div  v-if="scope.row.AttachmentCount>0" class="list-img">
                  <!-- 附件 -->
                  <img class="common-icon" src="../../../static/content/images/Common/common-attach.png" alt=""/>
                </div>
              </div> 
            </template>
          </el-table-column>
        </el-table>
        
        <!--工具条-->
        <el-col :span="24" class="toolbar">
        <el-pagination @current-change="changePage" layout="prev, pager, next" :page-size="rows" :current-page="currentPage" :total="total" style="float:right;">
        </el-pagination>
        </el-col>

        <!--流程图-->
        <el-dialog title="流程执行情况" :visible.sync="dialogDocViewVisible" :modal-append-to-body="false" align="center">
          <el-table :data="docView" border header-align="center" v-loading="docViewloading" element-loading-text="拼命刷新中...">
            <el-table-column property="PlanUser" label="操作人"></el-table-column>
            <el-table-column property="StepName" label="步骤名称"></el-table-column>
            <el-table-column property="OpDate" label="时间"></el-table-column>
            <el-table-column property="OpRemark" label="备注"></el-table-column>
          </el-table>
        </el-dialog>
        <!--查询-->
        <el-dialog title="查询" :visible.sync="dialogSearchVisible" :modal-append-to-body="false" size="tiny">
          <el-form :model="Searchform">
          <el-form-item label="金  额 ：" :label-width="formLabelWidth">
            <el-input v-model.number.trim="Searchform.StartMoney" auto-complete="off" style="width:120px;"></el-input>
            至&nbsp;<el-input v-model.number.trim="Searchform.EndMoney" auto-complete="off" style="width:120px;"></el-input>
          </el-form-item>
          <el-form-item label="日  期 ：" :label-width="formLabelWidth">
            <el-date-picker type="date" v-model="Searchform.StartDate" style="width:120px;" placeholder="选择日期"></el-date-picker>
            至&nbsp;<el-date-picker type="date" v-model="Searchform.EndDate" style="width:120px;" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="业务类型 ：" :label-width="formLabelWidth">
            <el-select v-model="Searchform.Type" style="width:262px;" placeholder="请选择">
            <el-option value="" label="全部">全部</el-option>
            <el-option
              v-for="item in TypeOptions"
              :key="item.Code"
              :label="item.Name"
              :value="item.Code">
            </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单  号 ：" :label-width="formLabelWidth">
            <el-input v-model="Searchform.DocNo" style="width:262px;"></el-input>
          </el-form-item>
          <el-form-item label="标  题 ：" :label-width="formLabelWidth">
            <el-input v-model="Searchform.Title" style="width:262px;"></el-input>
          </el-form-item>
          <el-form-item label="提交人 ：" :label-width="formLabelWidth">
            <el-select v-model="Searchform.Name"  filterable style="width:262px;" placeholder="请选择">
            <el-option value="" label="全部">全部</el-option>
            <el-option
              v-for="item in EmployeeList"
              :key="item.UserID"
              :label="item.RealName"
              :value="item.UserID">
            </el-option>
            </el-select>
          </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer cover">
          <el-button size="small" @click="Reset">重 置</el-button>
          <el-button size="small" @click="Query">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
</template>
<script>
import moment from 'moment';
export default {
  name: "notAudit",
  data() {
    return {
      notAuditList: [],
      loading: true, //显示loading
      key: "",
      docView: [],
      total: 0, //数据总数
      rows: 100, //每页显示多少条
      currentPage: 1,//当前页数
      docViewloading: true, //查看流程Loading
      dialogDocViewVisible: false,
      dialogSearchVisible:false,//查询窗口
      formLabelWidth:'120px',
      EmployeeList:[],//提交人
      Highlights:[],
      sels: [],//列表选中列
      StatusOptions:[],
			TypeOptions:[],
			Searchform: {
				StartMoney:"",
				EndMoney:"",
				StartDate:'',
				Type:'',
				EndDate:'',
				DocNo:'',
				Title:'',
        Name:''
      },
      mouse_enter_Rcv_DocNO:""
    };
  },
  methods: {
    cellMouseEnterFn(...arr){//鼠标移速单元格触发事件
			this.mouse_enter_Rcv_DocNO=arr[0].DocNO
		},
		cellMouseLeaveFn(){
			this.mouse_enter_Rcv_DocNO=""
		},
    changePage(page) {//当前页数
			this.currentPage = page;
			this.getList();
		},
    // 获取 审核 单列表
    async getList() {
			this.loading = true;
			const res = await axios.post('getAuditAndApplyList', {
        type:0,//=0 查询待审核  =1 查询已审核  =2 已发起  =3 未发起
				page:this.currentPage,//当前一页
				rows:this.rows,//显示5000条
			})
			this.total = res.total;//总页数
			this.notAuditList = res.rows;		
			this.loading = false;
    },
    search(){
			this.dialogSearchVisible = true;
			this.getStaffListEmployee();
			this.getTypes();
    },
    //提交人
		async getStaffListEmployee(){
      this.EmployeeList = await axios.get('Fu_GetStaffList');
      console.log(this.EmployeeList,'EmployeeList');
    },
    //业务类型
		async getTypes(){
			this.TypeOptions = await axios.get('getTypeOptions');
    },
    /*
		*  查询 
		*/
		async Query(){
    if(new Date(this.Searchform.StartDate)>new Date(this.Searchform.EndDate)){
			console.log(new Date(this.Searchform.StartDate),'this.Searchform.StartDate')
			console.log(new Date(this.Searchform.EndDate),'this.Searchform.EndDate')
			this.$message({
			message: '开始日期必须小于或者等于结束日期！',
			type: 'warning',
			duration: 1200
			});
			return;
		}else if(this.Searchform.StartMoney>this.Searchform.EndMoney){
			this.$message({
			message: '开始金额必须小于或者等于结束金额！',
			type: 'warning',
			duration: 1200
			});
			return;
		}
		this.dialogSearchVisible = false;
		console.log(this.Searchform.StartDate ? moment(this.Searchform.StartDate).format('L') : '','1');
		console.log(this.Searchform.EndDate ? moment(this.Searchform.EndDate).add(1,"d").format('L') : '','2');
		let filterName = {
			"groupOp": "AND",
			"rules": [{
			"field": "DocNO",
			"dataType": "string",
			"op": "cn",
			"data": this.Searchform.DocNo || ''
			}, {
			"field": "Title",
			"dataType": "string",
			"op": "cn",
			"data": this.Searchform.Title || ''
			},{
			"field": "Type",
			"dataType": "numeric",
			"op": "eq",
			"data": this.Searchform.Type || ''
			}, {
      "field": "CreateBy",
		  "dataType": "string",
		  "op": "eq",
		  "data": this.Searchform.Name || ''
      },{
			"field": "TotalMoney",
			"dataType": "numeric",
			"op": "ge",
			"data": this.Searchform.StartMoney || ''
      },{
			"field": "TotalMoney",
			"dataType": "numeric",
			"op": "le",
			"data": this.Searchform.EndMoney || ''
      },{
			"field": "Date",
			"dataType": "string",
			"op": "ge",
			"data": this.Searchform.StartDate ? moment(this.Searchform.StartDate).format('L') : ''
			}, {
			"field": "Date",
			"dataType": "string",
			"op": "le",
			"data": this.Searchform.EndDate ? moment(this.Searchform.EndDate).add(1,"d").format('L') : ''
			}],
			"groups": []
		}
		this.loading = true;
		const res = await axios.post("getAuditAndApplyList", { 
      type:0,
			filter:JSON.stringify(filterName),
			page:this.currentPage,
			rows:this.rows,
		});
		this.total = res.total;//总页数
		this.notAuditList = res.rows;
		this.loading = false;
		},
		Reset(){
			this.Searchform = {
				StartMoney:"",
				EndMoney:"",
				StartDate:'',
				EndDate:'',
				DocNo:'',
				Type:'',
				Title:'',
			}
		},
    //查看流程 //
    checkflow(index, rows) {
      this.dialogDocViewVisible = true;
      if (this.dialogDocViewVisible == true) {
          this.docViewloading = true;
          axios
            .get("checkFlow", {
              DocNo: rows.DocNO, //单据编号
              DocType: rows.Type
            })
            .then(res => {
              this.docView = res;
              this.docViewloading = false;
            })
            .catch(err => {
              console.log(err);
            });
      }
    },
    // audit(index, row) {
    audit(...arr){
			let row=arr[0];
      if (row.DocType == "借款单") {
        this.$router.push({
          path: "/borrowMoney?key=" + row.DocNO,
          query: {
            showNum: 2
          }
        });
      } else if (row.DocType == "还款单") {
        this.$router.push({
          path: "/refundMoney?key=" + row.DocNO,
          query: {
            showNum: 2
          }
        });
      } else if (row.DocType == "报销单") {
        this.$router.push({
          path: "/Expense?key=" + row.DocNO,
          query: {
            showNum: 2
          }
        });
      } else if (row.DocType == "收入确认单") {
        this.$router.push({
          path: "/Income?key=" + row.DocNO,
          query: {
            showNum: 2
          }
        });
      } else if (row.DocType == "出纳付款单") {
        this.$router.push({
          path: "/HistoryTable?key=" + row.DocNO,
          query: {
            showNum: 2,
            DocType: 401
          }
        });
      } else if (row.DocType == "出纳收款单") {
        this.$router.push({
          path: "/HistoryTable?key=" + row.DocNO,
          query: {
            showNum: 2,
            DocType: 402            
          }
        });
      } else if (row.DocType == "预算调整单") {
        this.$router.push({
          path: "/budgetAdjust?key=" + row.DocNO,
          query: {
            showNum: 3,
          }
        });
      }
    },
    selsChange: function(sels) {
      this.sels = sels;
      console.log(this.sels,'this.seles');
    },
    batchAudit(){
      if (this.sels.length==0) {//未勾选的状态下，不能审核，并提示
        this.$message({
          message:"请选择需要审核的单据",
          type:'warning',
          duration: 800
        })
        return
      }
      let Arr = [];
      let params;
      const h = this.$createElement;
      this.sels.map(item=>{
        let params = `${item.DocNO}|${item.Type}`;
        Arr.push(params);
      })
      params = Arr.join();      
      if (this.sels.length==1) {//只勾选一个的状态下，直接审核成功，并执行双击事件，进行跳转
        // this.auditOnlyOneFn(this.sels[0],params)
        this.audit(this.sels[0])
        return
      }
      this.$confirm('是否要批量审核选中单据？', '提示', {
					type: 'warning'
				}).then(() => {
          axios.get('BatchAudit',{
            keys:params
          }).then(res=>{
            console.log(res);
            if(res.Success){
              this.$message({
                message:res.Message,
                type:'success',
                duration: 800
              })
              setTimeout(() => {
                this.getList();
              }, 800);
            }else{       
               let arr = res.Data.split(",");
              console.log(arr);
              let newDatas = [];  
              const h = this.$createElement; 
              for(let i in arr){  
                newDatas.push(h('p',null,arr[i]));  
              };  
              this.$msgbox({  
                title: '消息',  
                message: h('div',null, newDatas),  
                showCancelButton: true,  
                confirmButtonText: '确定',  
                cancelButtonText: '取消',  
              })
            }
          }).catch(err=>{
            console.log(err);            
          })
        })

    }
  },
  mounted() {
    this.getList();
  }
};
</script>
<style scoped lang="scss">
@import "../../common/css/index.css";
.toolbar {
  line-height: 45px;
  height: 45px;
  padding: 0 0 0 10px;
}
.toolbar h2 {
  line-height: 36px;
  margin: 0 10px 0 0;
}
</style>